<template>
  <div class="forgot-container">
    <div class="forgot-card">
      <h2>找回密码</h2>
      <p>请输入您的注册邮箱，获取验证码并重置密码。</p>
      <form @submit.prevent="submit">
        <input v-model="email" type="email" placeholder="邮箱" required :disabled="codeSent" />
        <div v-if="codeSent">
          <input v-model="code" type="text" placeholder="验证码" required />
        </div>
        <button class="send-btn" type="button" @click="sendCode" v-if="!codeSent" :disabled="loading">发送验证码</button>
        <button class="send-btn" type="submit" v-else :disabled="loading">确认重置</button>
      </form>
      <router-link to="/login" class="back-link">返回登录</router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { resetPasswordApi, sendCodeApi } from '../../api/user'
import{useRouter} from 'vue-router'

const email = ref('')
const code = ref('')
const codeSent = ref(false)
const loading = ref(false)
const router = useRouter();

function sendCode() {
  if (!email.value) {
    alert('请填写邮箱！')
    return
  }
  loading.value = true
  sendCodeApi(email.value)
    .then(() => {
      alert('验证码已发送到您的邮箱，请查收！')
      codeSent.value = true
    })
    .catch((error) => {
      alert(error.response?.data?.message || '发送失败，请稍后再试！')
    })
    .finally(() => {
      loading.value = false
    })
}

function submit() {
  if (!email.value) {
    alert('请填写邮箱！')
    return
  }
  if (!code.value) {
    alert('请填写验证码！')
    return
  }
  loading.value = true
  resetPasswordApi(email.value, code.value)
    .then(() => {
      alert('密码已重置为123456aaa，请重新登录！')
      router.push('/login')
    })
    .catch((error) => {
      alert(error.response?.data?.message || '重置失败，请稍后再试！')
    })
    .finally(() => {
      loading.value = false
    })
}
</script>

<style scoped>
.forgot-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-height: unset;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #a9c5f7 0%, #e9ddfe 100%);
}
.forgot-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 32px 0 rgba(90, 80, 200, 0.15);
  padding: 40px 32px 32px 32px;
  min-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.forgot-card h2 {
  color: #5b6ee1;
  margin-top: 0;
  margin-bottom: 12px;
  text-align: center;
}
form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

input[type="email"], input[type="text"], input[type="password"] {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border 0.2s;
}
input[type="email"], input[type="text"], input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border 0.2s;
}

input:focus {
  border: 1.5px solid #a259ec;
}
.send-btn {
  margin-top: 10px;
  background: linear-gradient(90deg, #5b6ee1 0%, #a259ec 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.back-link {
  margin-top: 18px;
  color: #a259ec;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}
</style>
